<template>
<div class="customsDeclarationContract">



  <div class="head">

    <div class="btns clearfix">
      <!-- <el-button class="export"  :disabled="!editable" type="primary">导出</el-button> -->
    </div>


    <div class="tcf-table">
      <div class="tcf-table-in">
        <el-row class="-from">
          <el-col :span="4" class="-to01"></el-col>
          <el-col :span="8">
          </el-col>
          <el-col :span="4" class="-to03"></el-col>
          <el-col :span="8" class="-el-col -to04">
            <div class="bill-of-lading-project-requires -bill-of-lading-project-requires">
              <ul>
                <li>
                  <el-row>
                    <el-col :span="12">
                      <p>Contract No.:</p>
                    </el-col>
                    <el-col :span="12">
                      <el-input :readonly="!editable"  v-model="data.documentprocess_cc_cdc_contractNO" placeholder="请输入内容"></el-input>
                    </el-col>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-col :span="12">
                      <p>Contract Date:</p>
                    </el-col>
                    <el-col :span="12">
                      <el-date-picker  value-format="yyyy-MM-dd" @change="mustUpdate2" :disabled="!editable"  type="date" v-model="documentprocess_cc_cdc_contractDate" ></el-date-picker>
                    </el-col>
                  </el-row>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <el-row class="-from">
          <el-col :span="4" class="-to01">
            <p>The Buyer: </p>
          </el-col>
          <el-col :span="8">
            <div class="bill-of-lading-project-requires -bill-of-lading-project-requires -to02">
              <ul>
                <li>
                  <el-row>
                    <el-input :readonly="!editable" v-model="data.documentprocess_cc_cdc_buyer" placeholder="请输入内容"></el-input>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-input :readonly="!editable" v-model="data.documentprocess_cc_cdc_buyerAdd" placeholder="请输入内容"></el-input>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-input :readonly="!editable" v-model="data.documentprocess_cc_cdc_buyerTel" placeholder="请输入内容"></el-input>
                  </el-row>
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="4" class="-to03"></el-col>
          <el-col :span="8" class="-el-col -to04">
          </el-col>
        </el-row>
        <el-row class="-from">
          <el-col :span="4" class="-to01">
            <p>The Seller:</p>
          </el-col>
          <el-col :span="20">
            <div class="-Seller bill-of-lading-project-requires -bill-of-lading-project-requires -to02">
              <ul>
                <li>
                  <p>TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</p>
                </li>
                <li>
                  <p>NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE</p>
                </li>
                <li>
                  <p>TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA</p>
                </li>
                <li>
                  <p>TEL:+86-10-50911288</p>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="-Seller">
            This Contract is made by and between the Buyer the Sellers: whereby the Buyers agree to buy and the Sellers agree to sell the under mentioned goods subject to the terms and conditions as stipulated hereinafter:
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="-Seller bill-of-lading-project-requires -bill-of-lading-project-requires -to02">
              <ul>
                <li>
                  <p>(1) Name of Commodity and Specifications: </p>
                </li>
                <li>
                  <el-input :readonly="!editable"  v-model="data.documentprocess_cc_cdc_description" placeholder="请输入内容" class="hats"></el-input>
                  <!-- <el-input :readonly="!editable" placeholder="请输入内容" class="hats"></el-input> -->
                </li>
                <li>
                  <span>(2)  Quantity:</span>
                  <el-input :readonly="!editable"  v-model="data.documentprocess_cc_cdc_quantitys" placeholder="请输入内容" class="hats"></el-input>
                  <el-input :readonly="!editable"  v-model="data.documentprocess_cc_cdc_quantityUnit" placeholder="请输入内容" class="hats"></el-input>
                </li>
                <li>
                  <p>(3) Unit Price: </p>
                </li>
                <li class="special-input">
                  <span class="-Total">Total  Value: </span>
                  <el-input :readonly="!editable"  v-model="data.documentprocess_cc_cdc_amounts" placeholder="请输入内容" class="hats"></el-input>
                  <el-input :readonly="!editable"  v-model="data.documentprocess_cc_cdc_amounts_usd" placeholder="请输入内容" class="hats"></el-input>
                </li>
                <li>
                  <p>(4) Packing: STANDARD EXPORT PACKING</p>
                </li>
                <li>
                  <p>(5) Country of Origin & Manufacturer: P. R .C</p>
                </li>
                <li>
                  <span>(6)  Terms  of  Payment:</span>
                  <el-input :readonly="!editable" v-model="data.documentprocess_cc_cdc_payTerms" placeholder="请输入内容" class="hats"></el-input>
                </li>
                <li>
                  <span>(7) Insurance: </span>
                  <el-input :readonly="!editable" v-model="data.documentprocess_cc_cdc_insurance" placeholder="请输入内容" class="hats"></el-input>
                </li>
                <li>
                  <span>(8)  Time  of  Shipment:</span>
                  <el-input :readonly="!editable" v-model="data.documentprocess_cc_cdc_shipDate" placeholder="请输入内容" class="hats"></el-input>
                </li>
                <li>
                  <span>(9)  Port  of  Loading:  </span>
                  <el-input :readonly="!editable"  v-model="data.documentprocess_cc_cdc_loadPort" placeholder="请输入内容" class="hats"></el-input>
                </li>
                <li>
                  <span>(10)  Shipping Marks: </span>
                  <el-input :readonly="!editable"  v-model="data.documentprocess_cc_cdc_marks" placeholder="请输入内容" class="hats"></el-input>
                </li>
                <li>
                  <p>The Seller shall be obliged to have the shipping mark shown as below in addition to the port of destination, package number, gross and net weights, measurements and the other marks as the Buyer may require stenciled or marked conspicuously
                    with fast and unfading pigments on each packages. In the case of dangerous and/or poisonous cargo(s) , the seller is oblige to take care to ensure that the nature and the generally adopted symbol shall be marked conspicuously on each
                    package.</p>
                </li>
                <li>
                  <span>(11)  Port of Destination: </span>
                  <el-input :readonly="!editable"  v-model="data.documentprocess_cc_cdc_destPort" placeholder="请输入内容" class="hats"></el-input>
                </li>
                <li>
                  <span>(12) Other terms:</span>
                  <el-input :readonly="!editable"  v-model="data.documentprocess_cc_cdc_otherTerms" :maxlength="500" placeholder="请输入内容" class="hats hats-other"></el-input>
                </li>
              </ul>
            </div>
          </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span class="BUYER">THE BUYER</span><span class="SELLER">THE SELLER</span>
          </el-col>
        </el-row>


      </div>

    </div>



    <div class="upload" id="flow_05_upload">
      <p class="upload-hint">票据/附件</p>
      <div>
        <div class="upload-btn">
          <input type="file"  v-show="editable"  name="file" multiple @change="selectFiles" >
          <el-button :disabled="!editable" type="primary">选择附件</el-button>
        </div>

        <ul class="upload-files">
          <li @mouseover="handleOver(item)"   @mouseout="handleOut(item)" v-for="(item,index) in data.attachedFiles" :key="index">
            <span @click="download(item.id, $event)">{{item.name}}</span>
            <span v-if="editable && item.status" class="el-icon-circle-check" style="color:#67c23a;"></span>
            <span v-else-if="editable" class="el-icon-circle-close" @click="changeFiles(index,item)" style="color:red;"></span>
          </li>
        </ul>
      </div>
    </div>

  </div>

</div>
</template>

<script>
import {uploadFiles} from '@/server/initiatingprocess';
import {filedownload , deleteFile} from '@/server/customermanagement/index.js'
import {toFixed} from '@/util/transform.js';

export default {
  created(){
    this.documentprocess_cc_cdc_contractDate = this.data.documentprocess_cc_cdc_contractDate;
    this.data.documentprocess_cc_cdc_amounts_usd = this.data.documentprocess_cc_cdc_amounts_usd  || 'USD';
  },
  mounted(){
    let queryUrl = location.href;
    if (queryUrl.indexOf('flow_05_upload') != -1) {
      setTimeout(()=> {
        let flow_05_upload_top = document.getElementById('flow_05_upload').offsetTop;
        let docEle = document.documentElement || document.body;
        docEle.scrollTop = flow_05_upload_top + 90;
      },10)
    }


    let _this = this;
    this.bus.$on('bind-new-ftc', function (ftcData) {

      //关联 外贸合同

      _this.data.documentprocess_cc_cdc_contractNO = ftcData.bf_orderNumber;
      _this.data.documentprocess_cc_cdc_contractDate = ftcData.bf_orderDate;
      _this.data.documentprocess_cc_cdc_buyer = ftcData.bf_buy_name
      _this.data.documentprocess_cc_cdc_buyerAdd  = ftcData.bf_buy_address;
      _this.data.documentprocess_cc_cdc_buyerTel = ftcData.bf_buy_tel;


      _this.data.documentprocess_cc_cdb_fromPort = ftcData.bf_portOfLoad;
      _this.data.documentprocess_cc_cdb_toPort = ftcData.bf_portOfDestination;
      _this.data.documentprocess_cc_cdb_transport = ftcData.bf_shipment;
      _this.data.documentprocess_cc_cdb_tradeTerms = ftcData.bf_tradeTerm;
      _this.data.documentprocess_cc_cdb_shipMarks = ftcData.bf_shippingMarks;

      _this.$forceUpdate();
    });

  },
  updated(){
    if (this.clickTimes === 1 && this.relation) {

      let flag = this.data.modifyTime ? true : false;

      if (!flag) {
          //第一次关联报关箱单
          this.data.documentprocess_cc_cdc_quantitys = this.relatedData1.documentprocess_cc_cdb_totalCartons;

          this.data.documentprocess_cc_cdc_quantityUnit = this.relatedData1.documentprocess_cc_cdb_totalCartonsUnit;

          this.data.documentprocess_cc_cdc_marks = this.relatedData1.documentprocess_cc_cdb_marks;

          //第一次关联报关发票
          let temp = this.relatedData2.documentprocess_cc_cdi_table, desc = '';

          temp.forEach(item => {
            desc += item.documentprocess_cc_cdi_description + '  ';
          });

          this.data.documentprocess_cc_cdc_description = desc;

          this.data.documentprocess_cc_cdc_amounts = temp[temp.length - 1].documentprocess_cc_cdi_lineAmount;
          this.data.documentprocess_cc_cdc_payTerms = this.relatedData2.documentprocess_cc_cdi_payTerms;
          this.data.documentprocess_cc_cdc_shipDate =  this.relatedData2.documentprocess_cc_cdi_shipDate;
          this.data.documentprocess_cc_cdc_loadPort = this.relatedData2.documentprocess_cc_cdi_fromPort;
          this.data.documentprocess_cc_cdc_destPort = this.relatedData2.documentprocess_cc_cdi_toPort;

          this.documentprocess_cc_cdc_contractDate = this.data.documentprocess_cc_cdc_contractDate;
      }

      this.$forceUpdate();
      this.clickTimes = 2;
    }
    this.data.documentprocess_cc_cdc_amounts_usd = this.data.documentprocess_cc_cdc_amounts_usd  || 'USD';
  },
  methods: {
    //   合并单元格
    arraySpanMethod(row) {
      if (row.rowIndex === 10) {
        if (row.columnIndex === 0) {
          return [1, 3];
        } else if (row.columnIndex === 1) {
          return [0, 0];
        } else if (row.columnIndex === 2) {
          return [0, 0];
        }
      }
    },

    mustUpdate(){
      this.$forceUpdate();
    },
    mustUpdate2(){
      this.data.documentprocess_cc_cdc_contractDate = this.documentprocess_cc_cdc_contractDate;
      this.$forceUpdate();
    },

    specialInitialProcess() {
      let dom = document.querySelector('.initiatingprocess .routers-ctrl');
      if (dom) {
        dom.style.zIndex = '0';
      }
    },
    selectFiles(event){
      //票据附件
      let _this = this;


      //直接上传，并且获得后端返回的文件的url,将url保存到 this.data.attachedFiles中
      uploadFiles(event.target.files).then((resArr)=>{
        resArr.forEach(function(res,i){
          _this.data.attachedFiles.push({name: event.target.files[i].name, status: 1, id: res.data.datas[0].id});
        });

        _this.$forceUpdate();
      });
    },
    changeFiles(index,item) {
      deleteFile({'id':item.id}).then((res) => {
        if(res.code != 1 ){
          this.$message.error('删除失败，请检查网络后重试');
        } else {
          this.data.attachedFiles.splice(index, 1);
        }
      });
    },
    handleOver(item){
      item.status = 0;
      this.$forceUpdate();
    },
    handleOut(item){
      item.status = 1;
      this.$forceUpdate();
    },
    download(id, event){
      window.open('http://47.104.93.41/api/common/download?id='+id);
    },

  },
  data() {
    return {
      clickTimes: 0,
      documentprocess_cc_cdc_contractDate: '',
    }
  },
  props: {
    data: {
      type: Object,
      required: true
    },
    relatedData1: {
      type: Object,
      required: true
    },
    relatedData2: {
      type: Object,
      required: true
    },
    relation: {
      type: Boolean,
      required: true
    },
    editable: {
      type: Boolean,
      required: true
    },
    bus: {
      type: Object,
      required: true
    }
  },
  components: {}
}
</script>

<style lang="scss" >
.customsDeclarationContract {

    padding: 20px;

    font-size: 15px;
    line-height: 30px;

    p {
      padding: 5px 0;

      span {
        font-weight: bolder;
      }
    }

    border: 1px solid #999;
    > h2 {
        text-align: center;
    }

    a {
        color: #409EFF;
    }
    .el-table {
        margin-bottom: 20px;
    }

    .head {
        .btns {
            width: 100%;
            height: 40px;
            text-align: center;

            .export {
                float: right;
            }
        }

        .el-date-editor  {
          width: 100%;
        }

        .tcf-table {
            margin-top: 20px;
            padding: 20px;
            box-sizing: border-box;
            h2 {
                text-align: center;
                padding: 10px 0;
            }

            .el-input__inner {
                border: none;
            }

            .tcf-table-title {
                text-align: center;
            }
            .tcf-table-in {
                border-top: 1px solid #999;
                .el-row {
                    box-sizing: border-box;
                    border-bottom: 1px solid #999;
                    border-left: 1px solid #999;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border-right: 1px solid #999;
                    padding: 5px;
                }
            }
            .-to01,
            .-to03,
            .-to04 {
                height: 133px;
            }
            .-to04 {
                border-right: 1px solid #999 !important;
            }
            .-to02 {
                ul {
                    li {
                        margin-bottom: 1px;
                    }
                }
            }
            .-from {
                .el-col-24 {
                    padding: 0;
                    .el-row {
                        border: none;
                    }
                }
                .el-col-4,
                .el-col-8 {
                    border-right: none;
                }
            }
            .BUYER,
            .SELLER {
                display: inline-block;
                width: 50%;
                text-align: left;
            }
            .-Seller {
                text-align: left !important;
            }
            .el-table {
                margin-top: 20px;
            }
            .el-select {
                width: 100%;
            }
            .-el-col {
                padding: 0 !important;
            }
            .bill-of-lading-project-requires-p {
                height: 392px;
            }
            .special-provisions {
                height: 351px;
            }
            .bill-of-lading-project-requires {
                width: 100%;
                border-bottom: 1px solid #999;
                box-sizing: border-box;
                .el-row {
                    box-sizing: border-box;
                    border: none;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border: none;
                }
                .el-col-20 {
                    text-align: left;
                    text-indent: 20px;
                }
                .-el-col {
                    padding: 5px !important;
                    text-indent: 0;
                }
                .hats {
                    width: 10%;
                    margin-right: 5px;
                }

                .hats-other {
                  width: 80%;
                }
                .-Total {
                    margin-left: 18px;
                }
            }
            .-bill-of-lading-project-requires {
                border-bottom: none;
            }
            .sea-freight {
                .el-col {
                    text-align: center;
                    height: 90px;
                    line-height: 90px;
                    box-sizing: border-box;
                }
                .sea-freight-col {
                    line-height: 41px;
                    padding-top: 3px;
                }
            }
            .no-border {
                //   border: none !important;
            }

            .special-row {
                .el-col {
                    height: 25px;
                    line-height: 25px;
                }
            }

        }

        .special-input .hats {
          width: 20% !important;
        }

        .upload {
          >div {
            border: 1px solid #999;
            padding: 20px 0px 40px 20px;
          }

          .upload-btn {
            position: relative;
            >input {
              opacity: 0;
              width: 100px;
              height: 40px;
              position: absolute;
              top: 0;
              left: 0;
            }
          }

          .upload-files {

              > li {
                  width: 300px;
                  padding: 10px 0;
                  transition: all 0.5s linear;

                  &:hover {

                    >span {
                      color: #409EFF;
                    }
                  }
                }

              font-size: 16px;
              span {
                  padding: 0 10px;
                  cursor: pointer;
                  display: inline;
              }
              span.el-icon-close:hover {
                  cursor: pointer;
              }
          }
          .upload-hint {
            font-size: 20px;
            margin-bottom: 10px;
          }
        }

        .select-orders {

            // padding: 20px 0;

            li {
                padding: 5px 0;
            }
            .order-left {
                float: left;
            }
            .order-right {
                float: right;
            }
        }

    }

    .bind-window {
        .el-form--inline .el-form-item {
            margin-right: 15px;
        }

        td {
            border: 1px solid #e6ebf5;
        }

        td:not(.el-table_1_column_1) {
            width: 120px;
            min-width: 120px;
        }

        .dialog-footer {
            text-align: center;
            button {
                margin-right: 80px;
            }
        }

        a {
            color: #409EFF;
        }

    }
}
</style>
